<template>
  <div class="award-list" :class="{ 'has-margin-bottom': hasMarginBottom }" @click="onAwardListClick">
    <div class="top-section">
      <div v-if="isSwipper && !listData.award_image && extendData.awardImageList && extendData.awardImageList.length > 0">
        <swiper
          :indicator-dots="false" :autoplay="true" @change="onSwiperItemChange">
          <swiper-item v-for="(item, i) in extendData.awardImageList" :key="i">
            <img :src="item || icons[0]" :style="imageEmptyBg" mode="aspectFill" @click="previewImg(i)"/>
          </swiper-item>
        </swiper>
        <div class="indicator">{{currentImageIndex + 1}}/{{extendData.awardImageList.length}}</div>
      </div>
      <img v-else :src="listData.award_image || extendData.awardImageList && extendData.awardImageList[0] || icons[0]"
        :style="imageEmptyBg" mode="aspectFill" lazy-load="true" @click="previewImg(0)"/>
      <div class="tag" v-if="showCreater && listData.creater_nickname">{{listData.creater_nickname}} 发起</div>
    </div>
    <div class="title-section">
      <template v-if="listData.award_title_second || listData.award_title_third">
        <div class="title">奖项一：{{listData.award_title}} x {{listData.award_amount}}</div>
        <div class="title" v-if="listData.award_title_second">奖项二：{{listData.award_title_second}} x {{listData.award_amount_second}}</div>
        <div class="title" v-if="listData.award_title_third">奖项三：{{listData.award_title_third}} x {{listData.award_amount_third}}</div>
      </template>
      <div class="title" v-else>奖品：{{listData.award_title}} x {{listData.award_amount}}</div>
      <div class="date">
        <div>
          <span class="color" v-if="checkJoin && listInData[listData.activity_id] && listInData[listData.activity_id].activity_id">已参与 |</span>
          <span v-if="listData.type === 1">{{awardTime}} 自动开奖</span>
          <span v-if="listData.type === 2">参与者达到{{listData.award_people}}人时 自动开奖</span>
        </div>
        <div>
          <span class="over" v-if="listData.status === 2">[已结束]</span>
        </div>
      </div>
      <div class="condition" v-if="extendData.joinCondition && extendData.joinCondition[0] && extendData.joinCondition[0].value">参与条件：<span>{{extendData.joinCondition[0].value}}</span></div>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    listData: {
      type: Object,
      default: {}
    },
    // 是否检查并显示已参与字段
    checkJoin: {
      type: Boolean,
      default: false
    },
    // 参与的活动列表
    listInData: {
      type: Object,
      default: {}
    },
    // 下边距
    hasMarginBottom: {
      type: Boolean,
      default: true
    },
    // 右上角显示发起人
    showCreater: {
      type: Boolean,
      default: true
    },
    // 是否链接，可点击到详情
    isLink: {
      type: Boolean,
      default: true
    },
    // 是否轮播图片
    isSwipper: {
      type: Boolean,
      default: false
    },
    // 是否可以预览
    canPreview: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      icons: [
        `${require('static/images/award-bg.png')}`,
        `${require('static/images/image-bg.png')}`,
      ],
      currentImageIndex: 0
    }
  },
  computed: {
    imageEmptyBg () {
      return `background-image: url(${this.icons[1]});`
    },
    awardTime () {
      let output
      const time = this.listData.award_time
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    },
    extendData () {
      let output
      if (this.listData.data && this.listData.data.indexOf('{') > -1) {
        output = JSON.parse(this.listData.data)
      } else {
        output = {}
      }
      return output
    }
  },
  methods: {
    onAwardListClick () {
      if (this.isLink) {
        wx.navigateTo({
          url: `/pages/detail/main?activityId=${this.listData.activity_id}`,
        })
      }
    },
    /**
     * 轮播切换，更新下标
     */
    onSwiperItemChange (e) {
      this.currentImageIndex = e.mp.detail.current
    },
    /**
     * 预览图片
     */
    previewImg (i) {
      if (this.canPreview) {
        if (this.extendData.awardImageList && this.extendData.awardImageList.length > 0) {
          wx.previewImage({
            current: this.extendData.awardImageList[i], // 当前图片地址
            urls: this.extendData.awardImageList // 所有要预览的图片的地址集合，数组形式
          })
        } else if (this.listData.award_image) {
          let imgArr = []
          imgArr[0] = this.listData.award_image
          wx.previewImage({
            current: imgArr[0], // 当前图片地址
            urls: imgArr // 所有要预览的图片的地址集合，数组形式
          })
        }
      }
    }
  },
}
</script>

<style lang="less" scoped>
.award-list {
  &.has-margin-bottom {
    margin-bottom: 20rpx;
  }
  .top-section {
    position: relative;
    background-color: #fff;
    swiper {
      height: 400rpx;
    }
    .indicator {
      position: absolute;
      right: 30rpx;
      bottom: 30rpx;
      padding: 0 18rpx;
      font-size: 24rpx;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 44rpx;
      border-radius: 22rpx 22rpx;
    }
    img {
      display: block;
      width: 100%;
      height: 400rpx;
      background-size: 80rpx 80rpx;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .tag {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 28rpx;
      padding: 10rpx 20rpx;
    }
  }
  .title-section {
    background-color: #fff;
    padding: 24rpx 24rpx 30rpx;
    .title {
      padding-top: 6rpx;
      font-size: 34rpx;
      color: #000;
    }
    .date {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #777;
      padding-top: 14rpx;
      .color {
        color: #488ff0;
        font-weight: 600;
        padding-right: 10rpx;
      }
      .over {
        color: #e0382f;
      }
    }
    .condition {
      margin-top: 26rpx;
      font-size: 28rpx;
      color: #555;
      line-height: 50rpx;
      span {
        display: inline-block;
        font-size: 26rpx;
        font-weight: 600;
        background-color: #f0f0f0;
        padding: 0 16rpx;
      }
    }
  }
}
</style>
